require('./PageUserBinding.less');

import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import Actions from './Actions'
import Store from './Store';
import 'weui';
import '../../../../node_modules/react-weui/build/packages/react-weui.css';
import { CellsTitle,Form,CellHeader,FormCell,Select,CellBody,Input,Page,CellFooter,Button,Label,ButtonArea,
  Toptips,Icon,Footer,FooterText,Switch } from  'react-weui/build/packages'
import Utils from './../../../utils'


class UserBinding extends React.Component {
  constructor(props) {
    super(props);

    this.changeCertNum = this.changeCertNum.bind(this);
    this.enterInfo = this.enterInfo.bind(this);
    this.getVCode = this.getVCode.bind(this);
    this.checkCertNum = this.checkCertNum.bind(this);
    this.changeTeleNumber = this.changeTeleNumber.bind(this);
    this.changeVcode = this.changeVcode.bind(this);
  }

  changeVcode(e) {
    Actions.changeVcode(e.target.value);
  }

  changeCertNum(e) {
//    clearTimeout(this.state.userbind.warnTimer);
    Actions.changeCertNum(e.target.value);
    /*Actions.checkCertNum();*/
  }

  checkCertNum() {
    clearTimeout(this.state.userbind.warnTimer);
    Actions.checkCertNum();
  }

  enterInfo() {
    Actions.checkCertNum();
    clearTimeout(this.state.userbind.warnTimer);
    Actions.enterInfo();
  }

  getVCode() {
    clearTimeout(this.state.userbind.warnTimer);
    Actions.getVCode();
  }




  changeTeleNumber(e) {
    Actions.changeTeleNumber(e.target.value);
  }

  render() {

    return (
      <div>
        <Toptips type="warn" show={this.state.userbind.showWarn} className="warn-div">
          <Icon value="warn"/>{this.state.userbind.warnMessage}
        </Toptips>
        <div className="binding-div">
          <CellsTitle>绑定宜昌市智慧城建系统身份信息</CellsTitle>
          <Form >
            <FormCell >
              <CellHeader>
                <Label>身份证</Label>
              </CellHeader>
              <CellBody >
                <Input id="certNum" value={this.state.userbind.userInfo.certNum}
                       onChange={this.changeCertNum}
                       placeholder="请输入身份证号码"
                       maxLength="18"/>
              </CellBody>
              <CellFooter>

              </CellFooter>
            </FormCell>
            <FormCell vcode>
              <CellHeader>
                <Label>手机号码</Label>
              </CellHeader>
              <CellBody>
                  {this.state.userbind.phone}
              </CellBody>
              <CellFooter>

                <Button type="vcode"
                        onClick={this.getVCode}>{this.state.userbind.showCodeTimer ? '验证' : this.state.userbind.count + 'S'}</Button>
              </CellFooter>
            </FormCell>
            <FormCell>
              <CellHeader>
                <Label>验证码</Label>
              </CellHeader>
              <CellBody>
                <Input id="vcode" type="tel" value={this.state.userbind.userInfo.vcode} maxLength="6"
                       placeholder="请输入验证码"
                       onChange={this.changeVcode}/>
              </CellBody>
            </FormCell>



          </Form>
          {/*className= {this.state.userbind.showPhoneOK ? 'editshow' : 'edithide'}*/}
          <ButtonArea >
            <Button type="primary"  onClick={this.enterInfo} >
              确定
            </Button>
          </ButtonArea>
        </div>

        <div className="footer-div">
          <Footer>
            <FooterText style={{fontSize:'14px',paddingTop:'20px'}}>Copyright &copy; 2008-2017 湖北升思科技股份有限公司</FooterText>
          </Footer>
        </div>
      </div>
    );
  }

  componentWillMount() {
    Actions.initMode();
  }

  componentDidMount() {

  }

  componentWillReceiveProps(nextProps) {

  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state.userbind || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        console.log(thisProps[key], nextProps[key]);
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  componentWillUpdate(nextProps, nextState) {

  }


  componentDidUpdate(prevProps, prevState) {

  }


  componentWillUnmount() {

  }

}

ReactMixin.onClass(UserBinding, Reflux.connect(Store, 'userbind'));


export default UserBinding ;
